<template>
  <div class="goodsDetails" v-if="Object.keys(goodsDetailsInfo).length>0">
    <div class="title">{{goodsDetailsInfo.title}}</div>
    <div class="price">
      <span class="newPrice">{{goodsDetailsInfo.newPrice}}</span>
      <span class="oldPrice">{{goodsDetailsInfo.oldPrice}}</span>
      <span class="type" v-show="goodsDetailsInfo.discount!=''">{{goodsDetailsInfo.discount}}</span>
    </div>
    <div class="info">
      <span class="infoLeft">{{goodsDetailsInfo.columns[0]}}</span>
      <span class="infoMiddle">{{goodsDetailsInfo.columns[1]}}</span>
      <span class="infoRight">{{goodsDetailsInfo.services[goodsDetailsInfo.services.length-1].name}}</span>
    </div>
    <div class="serve">
      <div class="serveItem" v-for="index in goodsDetailsInfo.services.length-1" :key="index">
        <img :src="goodsDetailsInfo.services[index-1].icon" alt="">
        <span>{{goodsDetailsInfo.services[index-1].name}}</span>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  props:{
    goodsDetailsInfo:{
      type:Object,
      default:{}
    }
  }
}
</script>
<style scoped>
.goodsDetails{
  width: 100%;
  padding: 10px 7px;
  box-sizing: border-box;
}
.goodsDetails .title{
  width: 100%;
  line-height: 1.1em;
}
.goodsDetails .price{
  /* margin-top: 10px; */
  height: 40px;
  line-height: 40px;
}
.goodsDetails .price .newPrice{
  font-size: 22px;
  color: #f13e3a;
  margin-right: 5px;
}
.goodsDetails .price .oldPrice{
  font-size: 13px;
  color: #ccc;
  text-decoration: line-through;
  margin-right: 5px;
}
.goodsDetails .price .type{
  font-size: 11px;
  color: #fff;
  background-color: #f13e3a;
  border-radius: 15px;
  padding: 0px 5px;
  vertical-align: top;
}
.goodsDetails .info{
  color:#ccc;
  font-size: 13px;
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.goodsDetails .info span.infoMiddle{
  width: 0;
  flex:1;
  text-align: center;
}
.goodsDetails .serve{
  display: flex;
  line-height: 50px;
  flex-wrap: wrap;
  margin-bottom:10px;
}
.goodsDetails .serve div.serveItem{
  flex:1 1 auto;
  font-size: 13px;
  height: 20px;
  margin-bottom: 5px;
}
.goodsDetails .serve .serveItem img{
  width: 14px;
  vertical-align: text-top;
}

</style>